<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客总列表页</title>
    <link rel="stylesheet" href="css/list.css">
    <link rel="stylesheet" href="css/blog_list.css">
    <!-- 引入jQuery -->
     <!-- 引入 editor.md 的依赖 -->
   <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
   <script src="js/jquery.min.js"></script>
   <script src="editor.md/lib/marked.min.js"></script>
   <script src="editor.md/lib/prettify.min.js"></script>
   <script src="editor.md/editormd.js"></script>
   <script src="js/tools.js"></script>
    <!-- css样式 -->
    <style>
        .nav{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 50px;
        }
        .container{
            padding-top: 80px;
            height: auto;
        }
        .container-right{
            width: 100%;
        }
        .blog-pagnation-wrapper{
            height: 40px;
            margin: 16px 0;
            text-align: center;
        }
        .blog-pagnation-item{
            display: inline-block;
            padding: 8px;
            border: 1px solid #d0d0d5;
            color: #333;
        }
        .blog-pagnation-item:hover{
            background: #4e4eeb;
            color: #fff;
        }
        .blog-pagnation-item.actvie{
            background: #4e4eeb;
            color: #fff;
        }

    </style>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/logo.jpg" alt="">
        <span class="title">博客系统(SSM版本)</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="myblog_list.html" class='myblog' id="myblog">个人主页</a>
        <a href="blog_edit.html">写博客</a>
        <!-- <a href="/user/logout">退出登录</a> -->
        <a href="javascript:logout()" class="logout">退出登录</a>
        <!-- <a href="#">注销</a> -->
    </div>
    <!-- 版心 -->
    <div class="container">
        <!-- 右侧内容详情 -->
        <div class="container-right">
            <div class="blog-pagnation-wrapper">
                <button class="blog-pagnation-item" onclick="firstClick()">首页</button>
                <button class="blog-pagnation-item" onclick="beforeClick()">上一页</button>
                <button class="blog-pagnation-item" onclick="nextClick()">下一页</button>
                <button class="blog-pagnation-item" onclick="lastClick()">末页</button>
            </div>
        </div>

    </div>
</body>
<script>
    // 定义参数
    var totalPage = 3; // 总页数
    var totalCount = 6; // 总条数
    var pindex = 1; // 当前页码 (pindex - 1) * psize = offset
    var psize = 7; // 每页显示条数 limit---这里我们是定死的，但可以改进成用户可自由设定的

    var descLength = 80; // 简介最大长度
    // 字符串截取，将文章正文截取成简介
    function mySubstr(content){
        if(content.length>descLength){
            return content.substr(0,descLength);
        }
        return content;
    }

      // 个人博客列表的加载——实现了分页功能
      function getBlogList() {
          jQuery.ajax({
              type: 'post',
              url: '/article/get_list_by_page',  // servlet path, 在页面加载的过程中就会调用主机ip + contentPath + 这个servlet path(就@WebServlet后的地址)
              //dataType: 'json',
              data: {
                "pindex":pindex, // 当前页码,第几页 (pindex - 1) * psize = offset（偏移量）
                "psize":psize // 每页显示条数 limit
              },
              success: function(result) {
                    totalCount = result.data.count;
                    totalPage = Math.ceil(parseInt(totalCount)/psize);
                  var rightDiv = document.querySelector('.container-right');
                  
                  for (var blog of result.data.list) {
                     function create(name){
                         return document.createElement(name)
                     }
                     var tt = result.data.history
                      // 新建博客结点
                      var blogDiv = create("div")
                      blogDiv.className = 'blog'; // 引入CSS属性
                      // 创建博客标题
                      var titleDiv = document.createElement('div');
                      titleDiv.className = 'title';
                      titleDiv.innerHTML = blog.title;
                      blogDiv.appendChild(titleDiv); // 把博客标题挂到博客结点上
                      // 创建日期
                      var dateDiv = document.createElement('div');
                      dateDiv.className = 'date';
                      dateDiv.innerHTML = blog.createtime;
                      blogDiv.appendChild(dateDiv);  // 把博客日期挂到博客结点上
                      var descDiv = document.createElement('div');
                      descDiv.className = 'desc';
                      descDiv.innerHTML = mySubstr(blog.content);
                      blogDiv.appendChild(descDiv);  // 把博客摘要挂到博客结点上
                      // 创建查看全文按钮
                      var a = document.createElement('a');
                      a.className = 'detail';
                      a.innerHTML = '查看全文 >>';
                      // a标签跳转的过程就相当于是发了一个get请求，这里我们在跳转的url地址后加上要传递的参数，即QueryString,等下我们在博客详情页也会用到这个参数
                      a.href = 'blog_content.html?id=' + blog.id;
                      blogDiv.appendChild(a);
                      // 把 blogDiv 加入外层元素
                      rightDiv.appendChild(blogDiv);  // 把构建好的一篇博客挂到博客列表上
                  }
              },
              error: function(err) {
                if (err.status == 401) {
                    alert("当前用户未登录，你即将跳转到登录页面");
                    location.href = "login.html";
                }
               alert("获取博客列表失败！")
              }
          });
        }
      function getUser() {
       jQuery.ajax({
         type: 'get',
         url: '/user/get_user',
         success: function(result) {
            
            var linkDiv = document.querySelector('.myblog');
            // a标签跳转的过程就相当于是发了一个get请求，这里我们在跳转的url地址后加上要传递的参数，即QueryString,等下我们在博客详情页也会用到这个参数
            linkDiv.href = 'myblog_list.html?uid=' + result.data.id;
         },
         error: function() {
         }
       });
      }
 
      // 初始化页面
      function initPage() {
        pindex= getURLParam("pindex");
        // 登录进去后，第一次初始化页面时候url = list.html，即pindex是空的
        // 这里前端赋值为1,没有问题，不会转成字符串"1"(所以我们前端也可以对此进行特判)
        if(pindex==null || pindex==""){
            pindex = 1; // 我们再前后端都对这种特殊情况进行处理，更加保险
        }
        getUser();
        getBlogList();
      }
      
      initPage();

      // 点击首页
    function firstClick(){
        location.href = "blog_list.html?pindex=1";
    }
    // 点击末页
    function lastClick(){
        location.href = "blog_list.html?pindex="+totalPage;
    }
    // 点击上一页
    function beforeClick(){
        if(pindex>1){
            pindex = parseInt(pindex)-1;
            location.href = "blog_list.html?pindex="+pindex;
        }else{
            alert("已经是首页了");
        }
    }
    // 点击下一页
    function nextClick(){
        if(pindex>=totalPage){
            alert("已经是最后一页了");
            return false;
        }
        pindex = parseInt(pindex)+1;
        location.href = "blog_list.html?pindex="+pindex;
    }
    function logout() {
        if (confirm("确认退出？")) {
            jQuery.ajax({
                url:"/user/logout",
                type:"get",
                success: function(result) {
                    alert("恭喜,退出成功,点击进行下一步操作")
                    location.href = "login.html";
                },
                error: function() {
                    // 说明当前退出的状态不正确，可能未登录，强行跳转到登录页面.
                    alert("抱歉，当前状态异常，请点击确认！")
                    location.assign('/login.html');
                }
            });
        }
    }
</script>
</html>